import React, { memo, useEffect } from 'react'
import type { FC, ReactNode } from 'react'
import { PlayListWrapper } from './style'
import Header from './components/Header'
import { getSongList, getCategory } from '@/store/modules/musicplayer'
import { useDispatch } from 'react-redux'
import List from './components/List'

interface IProps {
  children?: ReactNode
}
const Playlist: FC<IProps> = () => {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getSongList({ page: 1, limit: 35 }))
    dispatch(getCategory())
  }, [])

  return (
    <PlayListWrapper className="wrap-v2 wrap-back">
      <Header />
      <List />
    </PlayListWrapper>
  )
}

export default memo(Playlist)
